<template>
  <node
    :title="config.name"
    :show-error="showError"
    :content="content"
    :isShowText="isShowText"
    @selected="$emit('selected')"
    @delNode="$emit('delNode')"
    @insertNode="(type) => $emit('insertNode', type)"
    placeholder="请设置审批人"
    header-bgc="#ff943e"
    header-icon="el-icon-s-check"
    :useable="!!processType"
  />
</template>

<script>
import Node from "./Node";
import { mapState } from "vuex";
export default {
  name: "ApprovalNode",
  props: {
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {
    Node,
  },
  data() {
    return {
      showError: false,
      errorInfo: "",
    };
  },
  computed: {
    ...mapState(["processType"]),
    content() {
      const config = this.config.props;
      if (config.assignedUser && config.assignedUser.length > 0) {
        return config.assignedUser.join(",");
      } else {
        return "审批人设置";
      }
    },
    isShowText() {
      const config = this.config.props;
      if (config.isShow === '1') {
        return '可见明细金额';
      } else if (config.isShow === '0') {
        return '不可见明细金额';
      } else {
        return '设置明细金额是否可见';
      }
    }
  },
  methods: {
    // 校验数据配置的合法性
    validateSelf() {
      let flag = true;
      this.showError = false;
      if (this.processType) {
        if (this.processType === 'payrollCredit') {
          if (this.config.props.assignedUser.length > 0 && ['0', '1'].includes(this.config.props.isShow)) {
            flag = true;
          } else {
            flag = false;
          }
        } else {
          if (this.config.props.assignedUser.length > 0) {
            flag = true;
          } else {
            flag = false;
          }
        }
      } else {
        return true;
      }
      console.log(`flag===>${this.config.name}`, flag);
      this.showError = !flag;
      return flag;
    },
  },
};
</script>

<style scoped></style>
